---
type: tutorial
title: Baue es selbst – Kopfzeile
description: >-
  Tutorial: Erstelle deinen ersten Astro-Blog —
  Verwende alles, was du bisher gelernt hast, um eine Kopfzeile mit responsiver 
  Navigation zu bauen
i18nReady: true
---

import Badge from '~/components/Badge.astro';
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';

Da deine Website auf verschiedenen Geräten angesehen wird, ist es an der Zeit, eine Seitennavigation zu erstellen, die sich an verschiedene Bildschirmgrößen anpasst!

<PreCheck>
  - eine Kopfzeile für deine Website zu erstellen, die die Navigationskomponente enthält
  - die Navigationskomponente responsiv zu gestalten
</PreCheck>

<Box icon="puzzle-piece">

## Versuche es selbst – Baue eine neue Kopfzeilenkomponente

<Steps>
1. Erstelle eine neue Kopfzeilenkomponente. Importiere und verwende deine vorhandene `Navigation.astro`-Komponente innerhalb eines `<nav>`-Elements, das sich in einem `<header>`-Element befindet.

    <details>
    <summary>✅ Zeige mir den Code! ✅</summary>

    Erstelle eine Datei namens `Header.astro` in `src/components/`
    ```astro title="src/components/Header.astro"
    ---
    import Navigation from './Navigation.astro';
    ---
    <header>
      <nav>
        <Navigation />
      </nav>
    </header>
    ```

    </details>
</Steps>

</Box>



<Box icon="puzzle-piece">

## Probiere es selbst aus – Aktualisiere deine Seiten

<Steps>
1. Ersetze auf jeder Seite deine bestehende `<Navigation />`-Komponente durch deine neue `<Header />`-Komponente.

    <details>
    <summary>Zeige mir den Code!</summary>

    ```astro title="src/pages/index.astro" ins={3,18} del={2,17}
    ---
    import Navigation from '../components/Navigation.astro';
    import Header from '../components/Header.astro';
    import Footer from '../components/Footer.astro';
    import '../styles/global.css';
    const pageTitle = "Startseite";
    ---
    <html lang="de">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <meta name="viewport" content="width=device-width" />
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
      </head>
      <body>
        <Navigation />
        <Header />
        <h1>{pageTitle}</h1>
        <Footer />
      </body>
    </html>
    ```
    </details>

2. Überprüfe deine Browser-Vorschau und stelle sicher, dass deine Kopfzeile auf jeder Seite angezeigt wird. Es wird noch nicht anders aussehen, aber wenn du deine Vorschau mit DevTools untersuchst, wirst du sehen, dass du nun Elemente wie `<header>` und `<nav>` rund um deine Navigationslinks hast.
</Steps>
</Box>

## Responsive Styles hinzufügen

<Steps>
1. Aktualisiere `Navigation.astro` mit der CSS-Klasse, um deine Navigationslinks zu steuern. Umfasse die vorhandenen Navigationslinks mit einem `<div>` mit der Klasse `nav-links` und dem ID-Attribut `main-menu`.

    ```astro title="src/components/Navigation.astro" ins={3,7}
    ---
    ---
    <div id="main-menu" class="nav-links">
      <a href="/">Startseite</a>
      <a href="/about/">Über mich</a>
      <a href="/blog/">Blog</a>
    </div>
    ```

2. Kopiere die CSS-Styles unten in `global.css`. Diese Styles:

    - Stylen und positionieren die Navigationslinks für Mobilgeräte
    - Verwenden eine `@media`-Abfrage, um verschiedene Styles für größere Bildschirmgrößen zu definieren

    :::tip[Mobile-First Design]
    Beginne damit zu definieren, was auf kleinen Bildschirmgrößen passieren soll! Kleinere Bildschirmgrößen erfordern einfachere Layouts. Passe dann deine Styles an, um größere Geräte zu berücksichtigen. Wenn du zuerst ein kompliziertes Layout entwirfst, musst du später daran feilen, um es wieder zu vereinfachen.
    :::

    ```css title="src/styles/global.css" ins={23-60}
    html {
      background-color: #f1f5f9;
      font-family: sans-serif;
    }

    body {
      margin: 0 auto;
      width: 100%;
      max-width: 80ch;
      padding: 1rem;
      line-height: 1.5;
    }

    * {
      box-sizing: border-box;
    }

    h1 {
      margin: 1rem 0;
      font-size: 2.5rem;
    }

    /* Navigation-Styles */
    .nav-links {
      width: 100%;
      left: 48px;
      background-color: #ff9776;
      display: none;
      margin: 0;
    }

    .nav-links a {
      display: block;
      text-align: center;
      padding: 10px 0;
      text-decoration: none;
      font-size: 1.2rem;
      font-weight: bold;
      text-transform: uppercase;
      color: #0d0950;
    }

    .nav-links a:hover,
    .nav-links a:focus {
      background-color: #ff9776;
    }

      display: unset;
    }

    @media screen and (min-width: 636px) {
      .nav-links {
        margin-left: 5em;
        display: block;
        position: static;
        width: auto;
        background: none;
      }

      .nav-links a {
        display: inline-block;
        padding: 15px 20px;
      }
    }
    ```
</Steps>

Verändere die Fenstergröße und beobachte, wie verschiedene Styles für unterschiedliche Bildschirmbreiten verwendet werden. Deine Kopfzeile ist jetzt **responsiv** durch die Verwendung von `@media`-Abfragen.


<Box icon="check-list">

## Checkliste

<Checklist>
- [ ] Ich kann CSS verwenden, um responsive Elemente auf meiner Website hinzuzufügen.
</Checklist>
</Box>

### Ressourcen

- [Komponentenbasiertes Design](https://www.droptica.com/blog/component-based-design/) <Badge class="neutral-badge" text="extern" />

- [Semantische HTML-Tags](https://www.dofactory.com/html/semantics) <Badge class="neutral-badge" text="extern" />

- [Mobile-First Design](https://www.mobileapps.com/blog/mobile-first-design) <Badge class="neutral-badge" text="extern" />
